<template>

  <div class="container">
    <div class="container_head">
      <el-row :gutter="20">

        <el-col :span="9">
          <h3 class="myH1">个人设置</h3>
        </el-col>

        <el-col :span="12">
          <h4 class="myH2"></h4>
        </el-col>

        <el-col :span="2">
          <el-button type="text" @click="dialogFormVisible = true"> <h4 class="myH3">修改密码</h4></el-button>
          <el-form :model="formPassword">
            <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
              <el-form-item label="当前密码" :label-width="formLabelWidth"style="width: 400px;margin-left: 200px">
                <el-input v-model="formPassword.oldpassword" autocomplete="off" show-password></el-input>
              </el-form-item>
              <el-form-item label="新密码" :label-width="formLabelWidth" style="width: 400px;margin-left: 200px">
                <el-input v-model="formPassword.newpassword" autocomplete="off" show-password></el-input>
              </el-form-item>
              <el-form-item label="确认密码" :label-width="formLabelWidth" style="width: 400px;margin-left: 200px">
                <el-input v-model="formPassword.agepassword" autocomplete="off" show-password></el-input>
              </el-form-item>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" >取 消</el-button>
                <el-button type="primary" @click="updatePassword" >确 定</el-button>
              </div>
            </el-dialog>
          </el-form>


        </el-col>

      </el-row>
    </div>
    <div class="container_body">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="基础信息" name="1">
          <div>
            <el-form ref="form" :model="form" label-width="45px">
              <el-form ref="form" :model="form" label-width="45px">
                <div class="form-section">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <div class="name">
                        <el-form-item label="姓 名" prop="name"
                                      class="form-item">
                          <el-input v-model="formUpdate.userName"
                                    size="medium" :maxlength="10">
                          </el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="StudentID">
                        <el-form-item label="学 号" prop="StudentID"
                                      class="form-item">
                          <el-input v-model="formUpdate.jobNumber"
                                    size="medium" :maxlength="10">
                          </el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="ethnicity">
                        <el-form-item label="民 族" prop="ethnicity"
                                      class="form-item">
                          <el-select v-model="formUpdate.nationality"
                                     size="medium">
                            <el-option label="汉族" value="汉族">
                            </el-option>
                            <el-option label="回族"
                                       value="回族">
                            </el-option>
                            <el-option label="满族"
                                       value="满族">
                            </el-option>
                            <el-option label="藏族"
                                       value="藏族">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="grid-content bg-purple">
                        <el-form-item label="性 别" prop="gender"
                                      class="form-item">
                          <el-radio-group v-model="radio"
                                          size="medium">
                            <el-radio label="0">男</el-radio>
                            <el-radio label="1">女</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
              <el-form ref="form" :model="form" label-width="70px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="Political-outlook">
                      <el-form-item label="政治面貌" prop="politicalStatus" class="form-item">
                        <el-select v-model="radio1" size="medium">
                          <el-option label="中共党员" value="0">中共党员</el-option>
                          <el-option label="中共预备党员" value="1">中共预备党员</el-option>
                          <el-option label="共青团员" value="2">共青团员</el-option>
                          <el-option label="民主党派成员" value="3">民主党派成员</el-option>
                          <el-option label="无党派人士" value="4">无党派人士</el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="birthday">
                      <el-form-item label="出生日期" prop="birthDate"
                                    class="form-item">
                        <el-date-picker type="date"
                                        v-model="formUpdate.userBir" size="medium">
                        </el-date-picker>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
              <el-form ref="form" :model="form" label-width="70px">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <div class="grid-content bg-purples">
                      <el-form-item label="身份证号" prop="idNumber" class="form-item">
                        <el-input v-model="formUpdate.identifyCard" size="medium" :maxlength="18"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
              <el-form-item>
                <el-button type="primary" @click="onSubmit"
                           style="width: 150px;">保存</el-button>
              </el-form-item>
            </el-form>
          </div>

        </el-collapse-item>
        <el-collapse-item title="组织机构" name="2">
          <div class="form-section">
            <el-form ref="form" :model="form" label-width="45px">
              <el-form ref="form" :model="form" label-width="70px">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <div class="grid-content bg-purple">
                      <el-form-item label="所属班级" prop="identifyCard" class="identifyCard" style="width:300px">
                        <el-input disabled value="所属班级" size="medium" :maxlength="10"></el-input>
                      </el-form-item>
                    </div>
<!--                      <el-form-item label="院 系"-->
<!--                                    prop="organization" class="form-item">-->
<!--                        <el-input v-model="form.organization"-->
<!--                                  size="medium">-->
<!--                        </el-input>-->
<!--                      </el-form-item>-->
                  </el-col>
<!--                  <el-col :span="8">-->
<!--                    <div class="grid-content bg-purple">-->
<!--                      <el-form-item label="年 级" prop="grade"-->
<!--                                    class="form-item">-->
<!--                        <el-input v-model="form.grade"-->
<!--                                  size="medium"></el-input>-->
<!--                      </el-form-item>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                  <el-col :span="8">-->
<!--                    <div class="grid-content bg-purple">-->
<!--                      <el-form-item label="学 历" prop="education"-->
<!--                                    class="form-item">-->
<!--                        <el-select v-model="form.education"-->
<!--                                   size="medium">-->
<!--                          <el-option label="高中" value="高中">-->
<!--                          </el-option>-->
<!--                          <el-option label="大专" value="大专">-->
<!--                          </el-option>-->
<!--                          <el-option label="本科" value="本科">-->
<!--                          </el-option>-->
<!--                          <el-option label="硕士研究生"-->
<!--                                     value="硕士研究生"></el-option>-->
<!--                          <el-option label="博士研究生"-->
<!--                                     value="博士研究生"></el-option>-->
<!--                        </el-select>-->
<!--                      </el-form-item>-->
<!--                    </div>-->
<!--                  </el-col>-->
                </el-row>
<!--                <el-row :gutter="20">-->
<!--                  <el-col :span="8">-->
<!--                    <div class="grid-content bg-purple">-->
<!--                      <el-form-item label="专 业" prop="speciality"-->
<!--                                    class="form-item">-->
<!--                        <el-input v-model="form.speciality"-->
<!--                                  size="medium">-->
<!--                        </el-input>-->
<!--                      </el-form-item>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                  <el-col :span="8">-->
<!--                    <div class="grid-content bg-purple">-->
<!--                      <el-form-item label="班 级" prop="class"-->
<!--                                    class="form-item">-->
<!--                        <el-input v-model="form.class"-->
<!--                                  size="medium"></el-input>-->
<!--                      </el-form-item>-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--                </el-row>-->
              </el-form>
              <el-form-item>
                <el-button type="primary" @click="onSubmit"
                           style="width: 150px;">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
        <el-collapse-item title="联系方式" name="3">
          <div class="form-section">
            <el-form ref="form" :model="form" label-width="70px">
              <el-form ref="form" :model="form" label-width="70px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <el-form-item label="移动电话" prop="mobilePhone"
                                    class="form-item">
                        <el-input v-model="formUpdate.mobilePhone"
                                  size="medium" :maxlength="11">
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <el-form-item label="电子邮件" prop="email"
                                    class="form-item">
                        <el-input v-model="formUpdate.email"
                                  size="medium"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16">
                    <div class="grid-content bg-purple">
                      <el-form-item label="联系地址" prop="address"
                                    class="form-item">

                        <el-input v-model="formUpdate.address"
                                  size="medium">
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
              <el-form-item>
                <el-button type="primary" @click="onSubmit"
                           style="width: 150px;">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
        <el-collapse-item title="个人简介" name="4">
          <div class="form-section">
            <el-form ref="form" :model="form" label-width="70px">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-input type="textarea" :rows="6"
                            placeholder="请输入个人简介" v-model="formUpdate.personDesc">
                  </el-input>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="onSubmit"
                           style="width: 150px;">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: "UpdateStudent",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      formUpdate: JSON.parse(window.localStorage.getItem('user')),
      radio: "0",
      radio1: "0",
      form: {
        name: '',
        birthDate: '',
        gender: '',
        ethnicity: '',
        politicalStatus: '',
        idNumber: '',
        employeeId: '',
        title: '',
        region: '',
        organization: '',
        mobilePhone: '',
        email: '',
        address: '',
        profile: '',
        activeName: '1'
      },
      formPassword:{
        userId:JSON.parse(window.localStorage.getItem('user')).userId,
        oldpassword:'',
        newpassword:'',
        agepassword:''
      },
      dialogFormVisible: false,

      formLabelWidth: '120px'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //修改密码
    updatePassword(){
      if (this.formPassword.newpassword==this.formPassword.agepassword){
        axios.post('http://localhost:8080/userinfo/updatepassword',this.formPassword).then(res=>{
          this.$message.success(res.data.data)
          this.dialogFormVisible = false;
        })
      }else {
        this.$message.warning("前后密码不一致！")
      }
    },
    onSubmit(){
      console.log(this.formUpdate)
      this.formUpdate.userSex= parseInt(this.radio);
      this.formUpdate.politicalStatus=parseInt(this.radio1);
      console.log(this.formUpdate.userSex)
      console.log(typeof (this.formUpdate.userSex))
      //改数据库
      axios.post('http://localhost:8080/userinfo/update', this.formUpdate).then(response => {
        console.log(response.data);
        this.$message.success("修改成功")
      })
          .catch(error => {
            console.log("error");
            console.log(error);
          });
      //改缓存
      localStorage.setItem("user", JSON.stringify(this.formUpdate));
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('submit success')
        } else {
          console.log('submit fail')
          return false
        }
      })
    },
    created() {

    }
  }


}
</script>

<style scoped>
.container{
  height: 570px;
  margin-bottom: 30px;
}
.container_head{

}
.container_body {
  /*border: 10px solid red;*/
  box-shadow: 0 10px 60px 0 rgb(69, 176, 255);
  text-align: center;
  height: 500px;
  width: 70%;
  margin: auto;
  background-color: white;
  padding: 20px;
}
.el-collapse{
  margin: 20px;
}
.myH1{
  margin-right: 250px;
}
.myH2{
  margin-left: 730px;
}
.myH3{
  margin-right: 55px;
}

.grid-content{
  margin-right: 100px;
}
.Political-outlook{
  margin-right: 280px;
}
.birthday{
  margin-right: 280px;
}
.teacherstatus{
  width: 275px;
}


</style>